<template>
	<view class="pucharsePop">
		<up-popup ref="shopCar" :show="showPop" mode="bottom" @close="close" @open="open" :round="8">
			<view class="pop boxSize_bb flexDeCo">
				<view class="item pop_one flex">
					<image src="/static/images/ProductListData/img1Replace.png" mode="" class="po_left"></image>
					<view class="po_right flexDeCo">
						<view class="por_top">酒店鹅绒枕芯</view>
						<view class="por_middle">
							￥2700-￥3000
						</view>
						<view class="por_bottom">
							￥3200-￥3500
						</view>
					</view>
				</view>
				<view class="item pop_two flex">被芯尺寸</view>
				<view class="item pop_three">
					<text class="pt_one boxSize_bb">
						200X230 cm
					</text>
					<text class="pt_two boxSize_bb">
						220x240 cm
					</text>
				</view>
				<view class="item pop_four">数量</view>
				<view class="item pop_five flex">
					<image src="/static/images/ProductListData/decline.png" mode="" class="pf_decline"
						@click="coutDecrease">
					</image>
					<text class="pf_cout">{{cout}}</text>
					<image src="/static/images/ProductListData/raise.png" mode="" class="pf_raise"
						@click="coutIncrease">
					</image>
				</view>
				<view class="item pop_six" @click="goToMyShopingCar">添加至购物车</view>
			</view>
		</up-popup>
	</view>
</template>

<script>
	import {  navigateTo, redirectTo, showToast } from "@/utils/promise"
	export default {
		mounted() {
			this.showPop = true

		},
		data() {
			return {
				showPop: false,
				cout: 0
			};
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.$emit("closePucharsePop")
			},
			coutIncrease() {
				// console.log("11")
				this.cout++;

			},
			coutDecrease() {
				// console.log("22")
				if (this.cout > 0) {
					this.cout--
				}
			},
			goToMyShopingCar() {
				if(this.cout <= 0) {
					showToast({
						title: "数量至少为1",
						icon: "error"
					})
					return
				}
				navigateTo({
					url: "/pages/ShoppingCartPage/ShoppingCartPage"
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	@import "../../../static/commonStyleLess/grayBox.less";

	.pop {
		width: 750rpx;
		height: 708rpx;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		background: #FFFFFF;
		padding: 30rpx;

		.pop_one {
			.po_left {
				width: 180rpx;
				height: 180rpx;
				border-radius: 8rpx;

			}

			.po_right {
				margin-left: 20rpx;

				.por_top {
					font-weight: 500;
					font-size: 34rpx;
					letter-spacing: 0px;
					color: #000000;
				}

				.por_middle {
					font-weight: 500;
					font-size: 30rpx;
					letter-spacing: 0px;
					color: #FF4D00;
					margin-top: 20rpx;
				}

				.por_bottom {
					font-family: 'PingFang SC';
					font-weight: 400;
					font-size: 24rpx;
					letter-spacing: 0px;
					text-decoration: line-through;
					color: #00000059;
					margin-top: 20rpx;

				}
			}
		}

		.pop_two {
			font-weight: 400;
			font-size: 28rpx;
			letter-spacing: 0px;
			color: #000000;
			margin-top: 40rpx;
		}

		.pop_three {
			margin-top: 25rpx; //改动大小

			.pt_one {
				padding: 22rpx 44rpx;
				border-radius: 40rpx;
				background: #EEEEEE;
				font-weight: 400;
				font-size: 26rpx;
				letter-spacing: 0px;
				text-align: center;

			}

			.pt_two {

				padding: 22rpx 44rpx;
				border-radius: 40rpx;
				border-width: 2rpx;
				font-weight: 400;
				font-size: 26rpx;
				letter-spacing: 0px;
				background: #EEF6FF;
				color: #0F4C97;
				margin-left: 20rpx;

			}
		}

		.pop_four {
			font-weight: 400;
			font-size: 28rpx;
			letter-spacing: 0px;
			color: #000000;
			margin-top: 30rpx;
		}

		.pop_five {
			margin-top: 20rpx;

			.pf_decline {
				width: 40rpx;
				height: 40rpx;
			}

			.pf_raise {
				width: 40rpx;
				height: 40rpx;
				margin-left: 40rpx;
			}

			.pf_cout {
				font-weight: 400;
				font-size: 28rpx;
				letter-spacing: 0px;
				color: #000000;
				margin-left: 40rpx;

			}
		}

		.pop_six {
			width: 670rpx;
			height: 88rpx;
			border-radius: 8rpx;
			background: #0F4C97;
			font-weight: 400;
			font-size: 34rpx;
			line-height: 88rpx;
			letter-spacing: 0px;
			color: #FFFFFF;
			text-align: center;
			margin-top: 60rpx;

		}
	}
</style>